<template>
 <div class="content-box"> 
    <div class="content">
        <form >
            <h2>欢迎登录</h2>
            <h4>智慧社区服务管理平台</h4>
            <span class="user el-icon-user-solid"></span>
            <span class="pasw el-icon-lock"></span>
            <input type="text" v-model="username"  placeholder="请输入用户名" autocomplete="username">
            <input type="password" v-model="password"  placeholder="请输入密码" autocomplete="current-password">
            <input type="submit" @click.prevent="loginsystem" value="登录">
        </form>
        <a href="javascript:;">忘记密码？</a>
    </div>
    </div>
</template>

<script>
export default {
name:'',
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    username:'',
    password:'',
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    // 登录的方法
loginsystem(){
    console.log(111);
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
// 生命周期 - 创建之前
beforeCreate() {},
 //生命周期 - 挂载之前
beforeMount() {},
//生命周期 - 更新之前
beforeUpdate() {}, 
//生命周期 - 更新之后
updated() {}, 
//生命周期 - 销毁之前
beforeDestroy() {}, 
//生命周期 - 销毁完成
destroyed() {}, 
}
</script>
<style lang='css' scoped>
/*@import url(); 引入公共css类*/
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-weight: 400;
    box-sizing: border-box;
}
html {
    /* background: transparent url(../images/login.png) no-repeat left top fixed; */
    background-size: cover;
}
.content-box {
    position: absolute;
    right: 8%;
    top: 50%;
    border-radius: 20px;
    width: 455px;
    height: 568px;
    transform: translateY(-50%);
    background: #cecccc ;
    
}
.content form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
h2 {
    font-size: 30px;
}
h4 {
    font-size: 24px;
}
h4 , input[type=password] {
    margin: 30px 0;
}
.content form input{
    outline: none;
    border: 0;
    padding-left: 30px;
    background-color: #f6f4fc;
    border-radius: 10px;
    width: 376px;
    height: 48px;
    color: #606266;
    font-size: 16px;
}
.content form input[type=submit] {
    background-color: #1891ff;
    padding-left: 0;
    font-size: 16px;
    border-radius: 10px;
    color: #fff;
}
.content form input[type=submit]:hover {
    background-color: #5d8db6;
}
.content {
    position: relative;
}
.content a {
    position: absolute;
    right: 15px;
    top: 78%;
}
.user,.pasw {
    position: absolute;
    font-size: 25px;
}
.user {
    top: 42%;
    left: 40px;
}
.pasw {
    top: 65%;
    left: 40px;
}
</style>